<template>
    <div class="left-top-container">
        <div ref="chartRef" class="chart-container"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null

// 电池占比数据
const batteryData = ref([
    { value: 0, name: '共享' },
    { value: 0, name: '外卖' },
    { value: 0, name: '社区' },
    { value: 0, name: '无人配送' }
])

const initChart = () => {
    if (!chartRef.value) return

    chartInstance = echarts.init(chartRef.value)

    const option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                return params.seriesName + '<br/>' + params.name + ': ' + Math.floor(params.percent) + '%';
            }
        },
        legend: {
            orient: 'horizontal',
            left: 'center',
            bottom: '5%',
            textStyle: {
                color: '#fff',
                fontSize: 12
            },
            itemWidth: 10,
            itemHeight: 10,
        },
        series: [
            {
                name: '电池占比',
                type: 'pie',
                radius: ['00%', '60%'],
                center: ['50%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: '#233343',
                    borderWidth: 2
                },
                // label: {
                //   show: true,
                //   position: 'center'
                // },
                label: {
                    show: true,
                    color: '#fff',
                    textBorderWidth: 0,
                    textBorderColor: 'transparent',
                    formatter: function(params) {
                        return params.name + ': ' + Math.floor(params.percent) + '%';
                    }
                },
                labelLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff'
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold',
                        color: '#fff'
                    }
                },
                data: batteryData.value,
                color: ['#00d4ff', '#0099cc', '#006699', '#003366', '#001a33']
            }
        ]
    }

    chartInstance.setOption(option)
}

const resizeChart = () => {
    if (chartInstance) {
        chartInstance.resize()
    }
}

onMounted(() => {
    setTimeout(() => {
        initChart()
    }, 1000)
    window.addEventListener('resize', resizeChart)
})

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose()
    }
    window.removeEventListener('resize', resizeChart)
})

const init = (module: any) => {
    let data = JSON.parse(module)
    if (module) {
        batteryData.value.forEach((item: any) => {
            if(item.name == '共享'){
                item.value = Number(data.shared)
            }else if(item.name == '外卖'){
                item.value = Number(data.takeaway)    
            }else if(item.name == '社区'){
                item.value = Number(data.community)
            }else if(item.name == '无人配送'){
                item.value = Number(data.unmannedDelivery)
            }
        })
    }
}

defineExpose({
    init
})
</script>

<style scoped lang="less">
.left-top-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.chart-container {
    flex: 1;
    width: 100%;
    min-height: 200px;
}
</style>